<template>
  <div class="box" shadow="never">
    <el-form :model="list" label-width="120px" :rules="rules" ref="ruleForm">
      <el-form-item></el-form-item>

      <el-form-item label-width="100px" label="商品名称:" prop="name">
        <el-input v-model="list.name" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="商品类型:" prop="type">
        <!-- <el-input v-model="list.type" style="width: 400px" /> -->
         <el-select v-model="list.type" placeholder="请选择商品类型">
          <el-option label="药匣" value="药匣"></el-option>
          <el-option label="食疗" value="食疗"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
        <el-button
          type="success"
          @click="addType"
          icon="el-icon-plus"
        ></el-button>
      </el-form-item>

      <el-form-item label-width="100px" label="价格:" prop="price">
        <el-input v-model.number="list.price" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="商品信息：">
        <el-input
          :autoSize="true"
          style="width: 400px"
          v-model="list.goodsDetail"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="销售项目:" prop="saleProject">
        <el-input v-model="list.saleProject" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="库存:" prop="stock">
        <el-input v-model.number="list.stock" style="width: 400px" />
      </el-form-item>

       <el-form-item label-width="100px" label="销售数量:" prop="salesNumber">
        <el-input v-model.number="list.salesNumber" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="介绍:" prop="introduction">
        <el-input v-model="list.introduction" style="width: 400px" />
      </el-form-item>

      <el-form-item label="售卖时间：" prop="createTime">
        <el-date-picker
          v-model="list.createTime"
          type="datetime"
          placeholder="选择售卖日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="更新时间：" prop="updateTime">
        <el-date-picker
          v-model="list.updateTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item label="商品图片：">
        <el-upload
          class="avatar-uploader"
          action="http://42.194.159.131:8080/pic/imgUpload?path=mall"
          :headers="headers"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="list.image" :src="list.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{$t('common.add')}}</el-button>
      </el-form-item>
    </el-form>

     <el-dialog :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="list" >
        <el-form-item label="商品类型" label-width="100px">
          <el-input autocomplete="off" v-model="list.type"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">{{$t('common.add')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import healmall from "@/api/healthymall";
export default {
  data() {
     var num = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('价格不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          }
            else {
              callback();

          }
        }, 1000);
      };
    return {
      dialogFormVisible: false, //对话框（查看）
      // -------------------------------------------日历
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      list: {
        detail: "string", //必传
        goodsDetail: {
          carePoints: "string",
          createTime: "",
          goodsId: 0,
          manufacturer: "string",
          name: "string",
          netContent: "string",
          updateTime: "",
          useWay: "string",
        }, //必传
        image: "",
      },
      headers: {
        Authorization: getToken(),
      },
      rules:{
         name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请输入商品类型', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
           saleProject: [
            { required: true, message: '请输入销售项目', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          introduction: [
            { required: true, message: '请介绍商品', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
          createTime: [
            { type: 'date', required: true, message: '请选择售卖日期、时间', trigger: 'blur' },
          ],
          updateTime: [
            { type: 'date', required: true, message: '请选择更新日期、时间', trigger: 'blur' },
          ],
           stock:[
           { validator: num, trigger: 'blur' }
          ],
           price:[
           { validator: num, trigger: 'blur' }
          ],
          salesNumber:[
           { validator: num, trigger: 'blur' }
          ],
      }
    };
  },

  methods: {
    onSubmit() {
       //获取from结点，验证字段
      this.$refs.ruleForm.validate(async (success) => {
        //如果全部字段符合条件
        if (success) {
      var vm = this;
      healmall
        .admall(vm.list)
        .then(function (resp) {
          vm.$message({
            message: "添加成功!",
            type: "success",
          });
          vm.$router.go(-1);
        })
        .catch(function (error) {
          vm.$message.error("添加失败");
        });
         }
        else {
          return false;
        }
      });
    },
     addType(){
    console.log('aaaaaaa');
    this.dialogFormVisible = true;
  },
    //上传图片相关回调
    handleAvatarSuccess(res, file) {
      console.log("aaaaaaaaaa");
      this.list.image = res.data.picUrl;
      console.log("上传图片成功", res);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log("beforeAvatarUpload", file);
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  // -------------------------------------------------
};
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}

.box {
  margin-left: 200px;
  height: 1100px;
  width: 700px;
  border: solid rgb(187, 186, 187);
}
.avatar-uploader .el-upload {
  border: 3px dashed #decfcf;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
